<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="130px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="计划名称" prop="zId" required >
						<el-select v-model="dataForm.zId" disabled placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zIdOptions" :key="index" :label="item.jhmc" :value="item.Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="维修设备名称" prop="wxsbmc" required >
						<el-select v-model="dataForm.wxsbmc" disabled placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in wxsbmcOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设备类型" prop="sblx" required >
						<el-select v-model="dataForm.sblx" disabled placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sblxOptions" :key="index" :label="item.NAME" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="设备状态" prop="sbzt" required >
						<el-select v-model="dataForm.sbzt" disabled placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sbztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="管辖部门" prop="gxbm" required >
						<el-select v-model="dataForm.gxbm" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in gxbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="维修日期" prop="wxrq" required >
						<el-date-picker v-model="dataForm.wxrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="维修人" prop="wxr" required >
						<el-select v-model="dataForm.wxr" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in wxrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="维修照片" prop="wxzp" >
						<JNPF-UploadImg v-model="wxzpList" accept="" :fileSize="20" sizeUnit="MB" :limit="1" >
						</JNPF-UploadImg>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="维修内容" prop="wxnr" required >
						<el-input v-model="dataForm.wxnr" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="防护措施" prop="fhcs" required >
						<el-input v-model="dataForm.fhcs" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="维修费用" prop="wxfy" required >
						<el-input v-model="dataForm.wxfy" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="维修情况" prop="wxqk" required>
						<el-input v-model="dataForm.wxqk" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					zId:undefined,
					wxsbmc:undefined,
					sblx:undefined,
					sbzt:undefined,
					gxbm:undefined,
					wxrq:undefined,
					wxr:undefined,
					wxzp:[],
					wxnr:undefined,
					fhcs:undefined,
					wxfy:undefined,
					wxqk:undefined,

        },
        rules: {
						zId:[
						{
							required:true,
							message:'请输入计划名称',
							trigger:'blur'
						},
						],
						wxsbmc:[
						{
							required:true,
							message:'请输入维修设备名称',
							trigger:'blur'
						},
						],
						sblx:[
						{
							required:true,
							message:'请输入设备类型',
							trigger:'blur'
						},
						],
						sbzt:[
						{
							required:true,
							message:'请输入设备状态',
							trigger:'blur'
						},
						],
						gxbm:[
						{
							required:true,
							message:'请输入管辖部门',
							trigger:'blur'
						},
						],
						wxrq:[
						{
							required:true,
							message:'请输入维修日期',
							trigger:'blur'
						},
						],
						wxr:[
						{
							required:true,
							message:'请输入维修人',
							trigger:'blur'
						},
						],
						wxnr:[
						{
							required:true,
							message:'请输入维修内容',
							trigger:'blur'
						},
						],
						fhcs:[
						{
							required:true,
							message:'请输入防护措施',
							trigger:'blur'
						},
						],
						wxfy:[
						{
							required:true,
							message:'请输入维修费用',
							trigger:'blur'
						},
						],
						wxqk:[
						{
							required:true,
							message:'请输入维修情况',
							trigger:'blur'
						},
						],

        },
				zIdOptions:[],
				wxsbmcOptions:[],
				sblxOptions:[],
				sbztOptions:[{"fullName":"报废","id":"0"},{"fullName":"停用","id":"1"},{"fullName":"备件","id":"2"},{"fullName":"启用","id":"3"}],
				gxbmOptions:[],
				wxrOptions:[],

					wxzpList:[],
					

      }
    },
    created() {
		this.getzIdOptions();
		this.getwxsbmcOptions();
		this.getsblxOptions();
		this.getgxbmOptions();
		this.getwxrOptions();

    },
    methods: {
		getzIdOptions()
		{
			previewDataInterface('2dbd9e69a9744b75921beb4e9a9abfaf').then(res => {
				this.zIdOptions = res.data
			})
		},
		getwxsbmcOptions()
		{
			previewDataInterface('c32d9927f0e54c76aebd63ac803eb7f8').then(res => {
				this.wxsbmcOptions = res.data
			})
		},
		getsblxOptions()
		{
			previewDataInterface('000691b2b6ff47e182460b08ef9f0027').then(res => {
				this.sblxOptions = res.data
			})
		},
		getgxbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.gxbmOptions = res.data
			})
		},
		getwxrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.wxrOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/wxdj/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.wxzpList = this.dataForm.wxzp ? JSON.parse(this.dataForm.wxzp) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'wxzp', JSON.stringify(this.wxzpList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/wxdj',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/wxdj/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>